<div class="tooltip-container">
  <div class="tooltip">
    <div class="text">Save Trees</div>

    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="leaf leaf3"></div>
    <div class="leaf leaf4"></div>
  </div>
  <div class="leaf icon"></div>
</div>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: simple, tooltip, animation, green, shadow, realistic, creative, savetrees */
/* This is an example, feel free to delete this code */
.tooltip-container {
  /* --background: #22d3ee; */
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  margin-bottom: -100px;
}

.bg {
  position: absolute;
  left: -30px;
  top: 0px;
  z-index: -2;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  width: 180px;
  height: 100px;
  transform: translateX(-50%);
  padding: 0.5em 1em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: url("");
  border-radius: 30px;
  background-size: cover;
  box-shadow: inset 0px 8px 9px #182218, 5px 8px 0px #314328;
  filter: drop-shadow(60px 60px 6px #18221888);
  border: 10px solid #3f5641ee;
  z-index: -1;
  animation: float 2s infinite;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  bottom: -22px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #e9f6f4;
  border: 10px solid #3f5641ee;
  border-left: none;
  border-top: none;
  border-radius: 5px;
  box-shadow: 10px 4px 0px #314328;
}

.tooltip-container:hover .tooltip {
  top: -120px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.leaf1 {
  top: -30px;
  left: -60px;
}
.leaf2 {
  top: -30px;
  left: -60px;
}
.leaf3 {
  top: -30px;
  left: -60px;
}
.leaf4 {
  top: -30px;
  left: -60px;
}
.tooltip-container:hover .leaf1 {
  rotate: z 20deg;
}
/* .tooltip-container:hover .leaf2{
rotate: z 20deg;
} */
.tooltip-container:hover .leaf3 {
  rotate: z -20deg;
}
.tooltip-container:hover .leaf4 {
  rotate: z 40deg;
}

.leaf {
  width: 60px;
  height: 40px;
  position: absolute;
  transform-origin: 100% 100%;
  transition: rotate 0.5s 0.2s linear;
  /* border: px solid #314328; */
  border-radius: 0 100%;
  background-image: linear-gradient(to right, #b4c7b3, #314328);
}
.icon {
  /* box-shadow: 60px 60px 6px #18221888,120px 60px 6px #18221888; */
  transform: translateX(-50%);
  filter: drop-shadow(60px 60px 6px #18221888);
}
.text {
  z-index: 2;
  font-size: 22px;
  color: #3f5641;
  font-weight: bolder;
  margin: auto;
  width: fit-content;
  padding-top: 25px;
  filter: drop-shadow(0px 0px 3px #fff);
}
@keyframes float {
  0% {
    top: -120px;
  }
  50% {
    top: -125px;
  }
  100% {
    top: -120px;
  }
}

</style>
    